<template>
    <div class="progress">
        <svg viewBox="0 0 100 100">
            <defs>
                <mask id="Mask">
                    <image x="0" y="0" width="100" height="100" xlink:href="../assets/ring_2.svg" />
                </mask>
                <linearGradient id="Gradient" x1="0" x2="1" y1="0" y2="0">
                    <stop offset="0%" stop-color="#0DE7FF"/>
                    <stop offset="100%" stop-color="#A7F7FF"/>
                </linearGradient>
                <linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
                    <stop offset="0%" stop-color="#1EA0FF"/>
                    <stop offset="100%" stop-color="#83CCFF"/>
                </linearGradient>
            </defs>
            <g mask="url(#Mask)" style="transform: rotateX(50deg); transform-origin: center;">
                <circle cx="50" cy="50" r="50" fill="#003c44" />
                <circle
                    class="progress-circle"
                    :style="{transform: `rotate(${90 - progress * 360 / 2}deg)`}"
                    cx="50"
                    cy="50"
                    r="50"
                    :stroke="num==1?'url(#Gradient)': 'url(#Gradient2)'"
                    fill="transparent"
                    stroke-width="100"
                    :stroke-dashoffset="(1 - progress) * 314"
                />
            </g>
            <!-- <text
                x="50"
                y="58"
                font-size="30"
                fill="white"
                font-weight="bold"
                text-anchor="middle"
                letter-spacing="-1px"
            >{{ Math.floor(progress * 100) }}%</text> -->
        </svg>
    </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
    name: 'Progress',
    props: {
        progress: {
            type: Number,
            default: 0
        },
        num: {
            type: Number,
            default: 1
        },
        
    }
})

</script>

<style scoped>
.progress {
    height: 110px;
    width: 110px;
    transform: translateY(10px);
}

.progress-circle {
    stroke-dasharray: 314;
    transform-origin: center;
}

svg {
    height: 100%;
    width: 100%;
}
</style>